<template>
    <a-drawer
            title="检索"
            :visible="visible"
            width="600px"
            :confirmLoading="confirmLoading"
            @close="handleCancel"
    >
        <div class="xlSeeFrom">
            <div class="xlSeeFrom-view">
                <a-descriptions bordered>
                    <a-descriptions-item :label="item.title" :span="3" :key="index" v-for="(item,index) in formData">
                        <a-form-model-item :key="index">
                            <a-input
                                    :disabled="item.disabled"
                                    v-if="item.type=='input'"
                                    :placeholder="'请输入'+item.title"
                                    v-model="form[item.dataIndex]">
                            </a-input>

                            <a-input-password
                                    :disabled="item.disabled"
                                    v-if="item.type=='input.password'"
                                    :placeholder="'请输入'+item.title"
                                    v-model="form[item.dataIndex]">
                            </a-input-password>

                            <a-input-number
                                    :min="0"
                                    :disabled="item.disabled"
                                    v-if="item.type=='input.number'"
                                    :placeholder="'请输入'+item.title"
                                    v-model="form[item.dataIndex]">
                            </a-input-number>

                            <a-input-number
                                    :min="0"
                                    :disabled="item.disabled"
                                    v-if="item.type=='input.money'"
                                    :placeholder="'请输入'+item.title"
                                    v-model="form[item.dataIndex]">
                            </a-input-number>

                            <a-textarea
                                    :disabled="item.disabled"
                                    v-if="item.type=='textarea'"
                                    :placeholder="'请输入'+item.title"
                                    v-model="form[item.dataIndex]">
                            </a-textarea>

                            <a-select
                                    :disabled="item.disabled"
                                    v-if="item.type=='select'"
                                    v-model="form[item.dataIndex]"
                                    :placeholder="'请输入'+item.title"
                                    showSearch
                                    allowClear>
                                <a-select-option
                                        :value="item2.dataValue == false? item2.dataValue: item2.dataValue|| item2.codeMasterValue"
                                        :key="index2"
                                        v-for="(item2,index2) in (typeof item.typeData == 'string'?$store.getters.dictionary[item.typeData]:item.typeData)">
                                    {{item2.dataName || item2.codeMasterName}}
                                </a-select-option>
                            </a-select>

                            <xlDate
                                    :disabled="item.disabled"
                                    v-if="item.type=='date'"
                                    :placeholder="item.title"
                                    :dataType="item.typeData || 'date'"
                                    v-model="form[item.dataIndex]">
                            </xlDate>

                            <div class="xl-dateRange" v-if="item.type=='dateRange'">
                                <xlDate class="xl-dateRange-start"
                                        :disabled="item.disabled"
                                        :dataType="item.typeData.type || 'date'"
                                        placeholder="开始日期"
                                        v-model="form[item.typeData.startDate]">
                                </xlDate>
                                <xlDate class="xl-dateRange-end"
                                        :disabled="item.disabled"
                                        :dataType="item.typeData.type || 'date'"
                                        placeholder="结束日期"
                                        v-model="form[item.typeData.endDate]">
                                </xlDate>
                            </div>
                            <a-radio-group
                                    v-if="item.type=='radio'"
                                    v-model="form[item.dataIndex]">
                                <a-radio
                                        :value="item2.dataValue == false? item2.dataValue: item2.dataValue|| item2.codeMasterValue"
                                        :key="index2"
                                        v-for="(item2,index2) in (typeof item.typeData == 'string'?$store.getters.dictionary[item.typeData]:item.typeData)">
                                    {{item2.dataName || item2.codeMasterName}}
                                </a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-descriptions-item>
                </a-descriptions>
            </div>
            <div class="drawer-footer">
                <a-button @click="form={}" type="primary">
                    重置
                </a-button>
                <a-button @click="handleOk" style="margin-left: 10px" type="primary">
                    搜索
                </a-button>
                <a-button @click="visible=false" style="margin-left: 10px" type="primary">
                    关闭
                </a-button>
            </div>
        </div>
    </a-drawer>
</template>

<script>
    import xlDate from '../../components/formUntil/xlDate'
    export default {
        name: "xlSeeFrom",
        data() {
            return {
                visible: false,
                type: 1,
                formData: [],
                form: {},
                confirmLoading: false,
                tableTitle: '查看'
            }
        },
        components:{
            xlDate
        },
        props: {
            width: String,
            searchColumns: {
                type:Array,
                default() {
                    return [];
                }
            }
        },
        created() {
            this.formatData()
        },
        methods: {
            handleOk() {
                this.$emit('searchKeyWord',this.form)
                this.visible = false
            },
            handleCancel() {
                //关闭窗口
                this.visible = false
            },
            formatData() {
                this.formData = []
                this.searchColumns.map((item, index) => {
                    if (item.key != "rowIndex" && item.dataIndex != "action" && item.type && item.type != 'upload'  && item.type != 'upload.file' && !item.searchVisible) {
                        this.formData.push(item)
                    } else {
                        if (item.children) {
                            this.formatChild(item.children)
                        }
                    }
                })
            },
            formatChild(children) {
                children.map((item, index) => {
                    if (item.key != "rowIndex" && item.dataIndex != "action" && item.type) {
                        this.formData.push(item)
                    } else {
                        if (item.children) {
                            this.formatChild(item.children)
                        }
                    }
                })
            },
        }
    }
</script>


<style scoped lang="less">
    .ant-drawer-body {
        width: 100%;
        height: calc(100% - 55px);

        .xlSeeFrom {
            width: 100%;
            height: 100%;

            .xlSeeFrom-view {
                width: 100%;
                height: calc(100% - 50px);
                overflow-y: scroll;

                .ant-descriptions-item-label {
                    padding: 16px;
                    word-break: keep-all;
                }

                .ant-card {
                    margin-bottom: 10px;
                }
                /deep/ .ant-form-item {
                    margin: 0;
                }

                /deep/.ant-input-number{
                    width: 100%;
                }
                /deep/.ant-select{
                    width: 100%;
                }
                .xl-dateRange{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
            }

            .drawer-footer {
                width: 100%;
                height: 50px;
                border-top: 1px solid #e8e8e8;
                border-radius: 0 0 4px 4px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
        }
    }
</style>
